<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>网站首页</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="../css/reset.css" rel="stylesheet">
<link href="../css/layout.css" rel="stylesheet">
<link href="../css/animate.min.css" rel="stylesheet">
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/xSlider.js"></script>
<script src="../js/index.js"></script>
<script>
	window.onload = function() {
		var oUl = document.getElementById('menuList');
		var aLi = oUl.children;
		var oBox = aLi[aLi.length - 1];
		var iNow = 0;

		for(var i = 0; i < aLi.length - 1; i++) {
			aLi[i].index = i;
			aLi[i].onmouseover = function() {
				//oBox.style.left=this.offsetLeft+'px';
				startMove(oBox, this.offsetLeft);
				style = "active";
			};
			aLi[i].onmouseout = function() {
				//oBox.style.left=this.offsetLeft+'px';
				startMove(oBox, iNow * aLi[0].offsetWidth);
			};
			aLi[i].onclick = function() {
				iNow = this.index;
			};
		}
	};
</script>
<style type="text/css">
	/*头部样式给你调整的，兼容下小屏幕做的处理*/
	
	.header {
		width: auto;
	}
	
	.commwidth {
		margin: 0;
		position: relative;
	}
	
	.menu {
		margin: 0 255px 0 268px;
	}
	
	#menuList {
		margin: 0 auto;
	}
	
	.logo {
		left: 74px;
		position: absolute;
		top: 0;
	}
	
	.user_menu {
		right: 100px;
		position: absolute;
		top: 0;
	}
	/*apply-main*/
	
	.apply-banner {
		width: 1200px;
		margin: 20px auto;
		display: block;
	}
	
	.apply-form {
		background: #7ba4b1;
		width: 1200px;
		margin: 0 auto;
		padding-top: 52px;
		padding-bottom: 48px;
	}
	
	.apply-title {
		text-align: center;
		color: #fff;
	}
	
	.apply-title span {
		font-size: 36px;
		border-bottom: 3px solid #a6c2cb;
		line-height: 42px;
		display: inline-block;
	}
	
	.apply-form-main {
		width: 460px;
		margin: 60px auto 0;
	}
	
	.apply-tab,
	.apply-input-box {
		margin-bottom: 24px;
	}
	
	.apply-tab-box {
		float: left;
		margin-right: 60px;
		cursor: pointer;
	}
	
	.apply-icn {
		background: url(a-icn2.png) no-repeat;
		width: 20px;
		height: 20px;
		display: inline-block;
		position: relative;
		top: 2px;
		margin-right: 4px;
	}
	
	.apply-tab-font {
		font-size: 24px;
		color: #fff;
	}
	
	.apply-active .apply-icn {
		background: url(a-icn.png) no-repeat;
	}
	
	
	.apply-input {
		width: 460px;
		height: 46px;
		background: none;
		border: 1px solid #fff;
		border-radius: 6px;
		color: #fff;
		font-size: 22px;
		text-indent: 1em;
	}
	
	.apply-input::-webkit-input-placeholder {
		color: #eaeaea;
	}
	
	.apply-input:-moz-input-placeholder {
		color: #eaeaea;
	}
	
	.apply-input:-o-input-placeholder {
		color: #eaeaea;
	}
	
	.apply-input:-ms-input-placeholder {
		color: #eaeaea;
	}
	
	.apply-btn {
		width: 244px;
		height: 52px;
		line-height: 52px;
		text-align: center;
		background: #17be74;
		color: #fff;
		font-size: 26px;
		display: block;
		margin: 0 auto;
		cursor: pointer;
	}
	
	.apply-btn:hover {
		background: rgba(23, 190, 116, .6);
	}
	#try {
		display: none;
	}
	/*footer*/
	
	.footer {
		margin-top: 34px;
		background: #282828;
		padding: 26px 0 30px;
	}
	
	.footer-top {
		width: 700px;
		margin: 0 auto;
	}
	
	.footer-title {
		color: #fff;
		font-size: 20px;
		margin-bottom: 14px;
	}
	
	.footer-vx-item {
		float: left;
	}
	
	.footer-vx-itemNo1 {
		margin-right: 50px;
	}
	
	.footer-vx-item p {
		font-size: 19px;
		color: #bfc3c9;
		text-align: center;
	}
	
	.footer-vx-item img {
		display: block;
		margin: 0 auto 10px;
	}
	
	.footer-vx {
		padding-right: 78px;
		border-right: 1px solid #6a6a6a;
	}
	
	.footer-contact {
		padding-left: 88px;
	}
	
	.footer-contact-font {
		font-size: 19px;
		color: #bfc3c9;
		margin-bottom: 22px;
	}
	
	.footer-bottom {
		font-size: 17px;
		color: #8e939a;
		text-align: center;
		margin-top: 26px;
	}
</style>
</head>

<body>
	<div class="header">
		<div class="commwidth clearfix">
			<h1 class="logo">
   					<img src="../images/logo.png" alt="">
   				</h1>
			<div class="menu">
				<ul class="clearfix" id="menuList">
					<li class="">
						<a href="#">首页</a>
					</li>
					<li>
						<a href="javascript:;">校本微课</a>
					</li>
					<li>
						<a href="javascript:;">名师微课</a>
					</li>
					<li>
						<a href="javascript:;">微课大赛</a>
					</li>
					<li>
						<a href="weike.html">课堂平台</a>
					</li>
					<li class="navBar">
						<a href="javascript:;">
							<p class="navtips clearfix">
								<span></span>
								<span></span>
								<span></span>
							</p>
							<div class="navList animated swing">
								<p>
									<a href="javascript:;">微课秀</a>
								</p>
								<p>
									<a href="javascript:;">微课直播</a>
								</p>
							</div>
						</a>
					</li>
					<li class="box"></li>
				</ul>
			</div>
			<div class="user_menu">
				<ul class="clearfix">
					<li>
						<span class="fl" id="sign">登录</span>
						<i class="fenge fl"></i>
						<em class="fl" id="register">注册</em>
					</li>
					<li class="searchLi">
						<div data-selector="search_show" class="search_show fl">
							<i data-selector="search_btn" class="icon1 search_btn fl"></i>
							<div data-selector="search_contain" class="search_contain opacity fl"><input type="text" class="search_text" data-selector="search_text"><i class="icon1"></i></div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="apply-main">
		<img class="apply-banner" src="a1.jpg" />
		<div class="apply-form">
			<h3 class="apply-title"><span>合作加盟</span></h3>
			<div class="apply-form-main">
				<div class="apply-tab clearfix">
					<div id="agent_tab" class="apply-tab-box apply-active">
						<span class="apply-icn"></span>
						<span class="apply-tab-font">加盟代理</span>
					</div>
					<div id="try_tab" class="apply-tab-box">
						<span class="apply-icn"></span>
						<span class="apply-tab-font">申请试用</span>
					</div>
				</div>
				<div id="agent">
					<div class="apply-input-box">
						<input class="apply-input" type="text" placeholder="请输入学校名称或单位名称" />
					</div>
					<div class="apply-input-box">
						<input class="apply-input" type="text" placeholder="请输入联系人姓名" />
					</div>
					<div class="apply-input-box">
						<input class="apply-input" type="text" placeholder="请输入联系人手机号" />
					</div>
					<div class="apply-input-box">
						<input class="apply-input" type="text" placeholder="请输入联系人邮箱（选填）" />
					</div>
				</div>
				<div id="try">
					<div class="apply-input-box">
						<input class="apply-input" type="text" placeholder="请输入学校名称或单位名称" />
					</div>
					<div class="apply-input-box">
						<input class="apply-input" type="text" placeholder="请输入联系人姓名" />
					</div>
					<div class="apply-input-box">
						<input class="apply-input" type="text" placeholder="请输入联系人手机号" />
					</div>
					<div class="apply-input-box">
						<input class="apply-input" type="text" placeholder="请输入联系人邮箱（选填）" />
					</div>
				</div>
				<span class="apply-btn">立即申请</span>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="footer-top clearfix">
			<div class="footer-vx fl">
				<p class="footer-title">关注我们</p>
				<div class="footer-vx-box clearfix">
					<div class="footer-vx-item footer-vx-itemNo1">
						<img src="vx1.jpg" />
						<p>佳讯教育</p>
					</div>
					<div class="footer-vx-item">
						<img src="vx2.jpg" />
						<p>微课课堂服务号</p>
					</div>
				</div>
			</div>
			<div class="footer-contact fl">
				<p class="footer-title">关注我们</p>
				<p class="footer-contact-font">热线电话：400-815-0802</p>
				<p class="footer-contact-font">电&#12288;&#12288;话：010-62698511</p>
				<p class="footer-contact-font">Q &#12288;&#12288; Q：981940781</p>
			</div>
		</div>
		<p class="footer-bottom">© Copyright@2015-2025北京永恒信业科技有很公司 .版权所有 京ICP备09025686号-1</p>
	</div>
</body>
<script type="text/javascript">
	$('[data-selector="search_show"]').click(function() {
		$('[data-selector="search_contain"]').show();
		$('[data-selector="search_btn"]').hide();
	});
	$('[data-selector="search_text"]').focus(function() {
		$('[data-selector="search_contain"]').removeClass('opacity');
	});
	$('.slider').xSlider();
	$('.navBar').on('mouseover', function(event) {
		$('.navList').show();
		event.preventDefault();
	});
	$('.navBar').on('mouseout', function(event) {
		$('.navList').hide();
		event.preventDefault();
	});
	//登录
	$("#sign").on("click", function(e) {
		$("#sign_pop").show();
		$(document).one("click", function() {
			$("#sign_pop").hide();
		});
		e.stopPropagation();
	});
	$("#sign_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#sign_pop").hide();
		});
	});
	//找回密码
	$('.forget_password').on('click', function(e) {
		$("#sign_pop").hide();
		$('#find_pas_pop').show();
		$(document).one("click", function() {
			$("#find_pas_pop").hide();
		});
		e.stopPropagation();
	});
	$("#find_pas_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#find_pas_pop").hide();
		});
	});
	//返回登录
	$(".backBar").on("click", function(e) {
		$('#find_pas_pop').hide();
		$("#sign_pop").show();
		$(document).one("click", function() {
			$("#sign_pop").hide();
		});
		e.stopPropagation();
	});
	$("#sign_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#sign_pop").hide();
		});
	});
	//找回密码下一步
	$('.nextBar').on('click', function(e) {
		$("#find_pas_pop").hide();
		$('#find_sure_pop').show();
		$(document).one("click", function() {
			$("#find_sure_pop").hide();
		});
		e.stopPropagation();
	});
	$("#find_sure_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#find_sure_pop").hide();
		});
	});
	//注册
	$('.register_bar').on('click', function(e) {
		$("#sign_pop").hide();
		$('#register_pop').show();
		$(document).one("click", function() {
			$("#register_pop").hide();
		});
		e.stopPropagation();
	});
	$("#register_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#register_pop").hide();
		});
	});

	//注册
	//     $("#register").on("click", function(e){
	//     $("#register_pop").show();

	//     $(document).one("click", function(){
	//<p class = "footer-contact-font" > 热线电话： 400 - 815 - 0802 < /p>
	//         $("#register_pop").hide();
	//     });

	//     e.stopPropagation();
	// });
	// $("#register_pop").on("click", function(e){
	//     e.stopPropagation();
	//     $('.mask').click(function(event) {
	//     	$("#register_pop").hide();
	//     });
	// });
	
	/*表单选项卡*/
	$('#agent_tab').click(function(){
		$('#try').hide();
		$('#agent').show();
		$('#try_tab').removeClass('apply-active');
		$(this).addClass('apply-active');
	})
	$('#try_tab').click(function(){
		$('#agent').hide();
		$('#try').show();
		$('#agent_tab').removeClass('apply-active');
		$(this).addClass('apply-active');
	})
</script>

</html>